<!--end提限页面-->
<template>
	<view>
		<view class="bankChoose">
			<view class="l">提现至</view>
			<view class="r">
				<button class="choose" hover-class="chooseHover" @click="showPop">
					
					<text v-if="!selectedCard">请选择银行卡</text> 
					<view v-else class="seleCard">
						<image class="minImg" :src="selected.miniUrl"  mode="aspectFit"></image>
						{{selected.bankName}}({{selected.bankNum}})
					</view>
					<text class="uniicons">&#xe470;</text>
					
				</button>
				<!-- <view class="choose">
					<image class="img" src="../../../static/image/page/bank.png"></image>
					<text>中国银行卡</text>
					<text class="uniicons">&#xe470;</text>
				</view> -->
			</view>
		</view>
		<view class="con">
			<view class="title com_title">提现金额</view>
			<view class="num">
				<text class="fu">￥</text>
				<input class="number" type="number" placeholder="请填写提现金额" placeholder-class="placeholder" v-model="sumBalance" />
			</view>
		</view>
		<view class="tips">
			金额满50才可以提现
		</view>
		<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7"
		:radius="radius" width="100%" height="88rpx" font-size="36rpx" @click="mineExtract"
			>提现</wyb-button>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="popTop">
					<button class="pop_close"  @click="closePop">
						<uni-icons type="closeempty" size="32"></uni-icons>
					</button>
					<text class="title com_title">选择提现银行卡</text>
				</view>
				<scroll-view class="pop_con" scroll-y>
					<view class="list">
						<button class="addBank" v-for="(item, index) in bankList" :key="item.id" @click="choseCard(index)">
							<image class="icon" :src="item.miniUrl" mode="aspectFit"></image>
							<text class="com_title title">{{item.bankName}}({{item.bankNum}})</text>
							<text class="uniicons selected" v-if="choseIndex == index">&#xe472;</text>
						</button>
					</view>
					<button class="addBank" @click="toAddCard">
						<image class="icon" src="../../../static/image/page/bank_icon.png" mode="aspectFit"></image>
						<text class="com_title title">添加银行卡</text>
						<uni-icons type="plusempty" size="32"></uni-icons>
					</button>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	export default {
		data() {
			return {
				radius: ["100px"],
				selected: {
					bid:"",
					miniUrl: "",
					bankName: "",
					bankNum: ""
				},
				sumBalance: null,
				bankList: [],
				choseIndex:null,
				selectedCard: false
			};
		},
		watch:{
			selected: {
				handler(newVal,oldVal) {
					this.selectedCard = newVal.bid == "" ?false: true;
				},
				deep: true,
				immediate: true
			}
		},
		onShow() {
			this.getBaknList();
		},
		methods:{
			showPop() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			//申请提现
			mineExtract() {
				let parmas = {
					bid: this.selected.bid,
					sumBalance: this.sumBalance
				}
				let checkRes = graceChecker.check(parmas, formRuleConfig.mineExtract);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				this.$api.mineExtract(parmas).then(res=> {
					let id = res.data.data.id;
					uni.navigateTo({
						url: "/pages/user/inside/widthResult?id=" + id +"&show=true"
					})
				}).catch(()=> {})
			},
			//选择银行卡
			choseCard(index){
				this.choseIndex = index;
				this.selected.bid = this.bankList[index].id;
				this.selected.miniUrl =  this.bankList[index].miniUrl;
				this.selected.bankName =  this.bankList[index].bankName;
				this.selected.bankNum =  this.bankList[index].bankNum;
			},
			//获取银行卡列表
			getBaknList() {
				this.$api.getBankList().then(res=> {
					this.bankList = res.data.data;
				})
			},
			//添加银行卡
			toAddCard(){
				uni.navigateTo({
					url:"/pages/bank/bankNewCard"
				})
			}
		}
	}
</script>
<style>
	page{padding: 0 30rpx;box-sizing: border-box;}
</style>
<style lang="scss" scoped>
	.bankChoose{display: flex;align-items: center;justify-content: space-between;height: 120rpx;
		border-bottom: 2rpx solid #EEEEEE;
		.l{font-size: 32rpx;font-weight: bold;color: #333333;}
		.r{flex: 1;margin-left: 50rpx;
			.choose{display: flex;align-items: center;justify-content: space-between; color: #BCBCBC;background: #FFFFFF;
				font-size: 32rpx;
			}
			.uniicons{font-size: 32rpx;color: #BCBCBC;}
			.chooseHover{opacity: .1; background: #000}
			.seleCard{color: #333333;display: flex;align-items: center;}
			.minImg{width: 40rpx;height: 40rpx;margin-right: 20rpx;}
		}
	}
	.con{padding: 40rpx 0; border-bottom: 2rpx solid #EEEEEE;
		.num{margin-top: 30rpx;display: flex;justify-content: space-between;align-items: center;height: 60rpx;
			.fu{font-size: 48rpx;}
			.number{flex: 1; font-size: 68rpx;}
			/deep/.placeholder{font-size: 32rpx;}
		}
	}
	.tips{margin: 20rpx 0 110rpx;}
	.popup{width: 100%;height: 50vh;background: #fff;border-radius: 20rpx 20rpx 0 0;padding: 0 30rpx;
		.popTop{padding: 40rpx 0;display: flex;justify-content: space-between;align-items: center;border-bottom: 2rpx solid #EEEEEE;
			.pop_close{width: 64rpx;height: 64rpx;background: #fff;color: #666666;padding: unset;line-height: 64rpx;}
			.title{flex: 1;text-align: center;margin-left: -36rpx;}
		}
		.pop_con{height: calc(100% - 130rpx);overflow-y: auto;}
		.addBank{height: 130rpx;background: #fff;display: flex;align-items: center;
			font-size: 32rpx;border-bottom: 2rpx solid #EEEEEE;justify-content: space-between;
			.icon{width: 40rpx;height: 40rpx;margin-right: 24rpx;}
			.title{flex: 1;text-align: left;}
			.uniicons{font-size: 40rpx;}
			.selected{color: $dtg-color-primary;}
		}
	}
</style>
